<template>
    <div class="main-login">
        <center class="title">Sign In</center>
        <van-image width="100%" :src="phoneLogin" class="img" />
        <div class="form">
            <van-form @submit="onSubmit" :show-error-message="false" @failed="onFailed" >
                <InputCountryPhone :style="{marginBottom: '10px'}" v-model:form="phoneForm" :rules="[{ required: true, message: 'Phone Number is required' }]" name="phoneNum" placeholder="Phone Number" />
                <van-field
                    class="password"
                    v-model="form.password"
                    name="password"
                    type="password"
                    placeholder="Password"
                    label-width="1rem"
                    :rules="[{ required: true, message: 'password is required'}]"
                >
                    <template #right-icon>
                        <van-icon name="eye-o" size="24px" color="#FF5E00" class="eye" />
                    </template>
                </van-field>
                <div class="forgote"><router-link :to="{name: ''}"><font color="#FF5E00">Forgote Password</font></router-link></div>
                <div style="margin: 20px 0px">
                    <van-button round block type="primary" native-type="submit"><strong>Sign In</strong></van-button>
                </div>
                <p class="tip w8"><center>Don’t have an account? <router-link :to="{name: 'Register'}"><font color="#FF5E00">Sign Up</font></router-link></center></p>
            </van-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, reactive, provide  } from 'vue'
import { useRouter } from 'vue-router'
import phoneLogin from '../assets/phone-login.png'
import InputCountryPhone from '../components/custom/input-country-phone/index.vue'
import { Notify, Toast } from 'vant'

const router = useRouter()

const form: {phoneNum: string, countryid: number, password: string} = reactive({
    phoneNum: '',
    countryid: 0,
    password: '',
})

const phoneForm: {countryid: number, phoneNum: string} = reactive({phoneNum: '', countryid: 0})

const onSubmit = () => {
    form.countryid = phoneForm.countryid;
    form.phoneNum = phoneForm.phoneNum;
    const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: 'Loading...'
    });
    setTimeout(()=>{
        toast.clear()
        console.log(form, '发送登录请求')
        router.push({name: 'ShopIndex'})
    }, 3000)
}

const onFailed = (err: any) =>{
    Notify({ type: 'warning', message: err.errors[0].message });
}

</script>

<style lang="less" scoped>
.main-login {
    .title {
        font-weight: bold;
        font-size: 24px;
        line-height: 41px;
        letter-spacing: 0.41px;
        color: #FF5E00;
    }
    .forgote {
        text-align: right;
        padding: 5px 0px;
        font-size: 14px;
    }
}
</style>
